<template>
    <div>
        <!-- 角色管理页面 -->
        <Card>
            <p slot="title" class="card-title">
                <Icon type="home"></Icon>
                <span>角色管理</span>
            </p>
            <div>
                <template>
                    <Row>
                        <Col span="15">
                            <Button type="info" @click="openAddOrUpModal(null)">
                                <Icon type="ios-medkit-outline"/>&nbsp;添加角色
                            </Button>
                            <Button :disabled="setting.loading" type="success" @click="getData">
                                <Icon type="ios-refresh"></Icon>&nbsp;刷新数据
                            </Button>
                            <Button type="primary" @click="exportData(1)">
                                <Icon type="ios-download-outline"></Icon>&nbsp;导出表格
                            </Button>
                        </Col>
                        <Col span="9">
                            <Input v-model="search.value" placeholder="请输入您想要搜索的内容..." class="margin-bottom-10">
                            <Button slot="append" icon="ios-search" @click="search"></Button>
                            </Input>
                        </Col>
                    </Row>
                    <Table ref="table" class="margin-bottom-10" :columns="columns"
                           :loading="setting.loading" :border="setting.showBorder" :data="data.content"></Table>
                    <Page :total="data.totalElements" class="tr" @on-change="pageChange" :current.sync="data.number+1"
                          :page-size="data.size"
                          @on-page-size-change="pageSizeChange" show-elevator show-sizer></Page>
                </template>
            </div>
        </Card>

        <!-- 添加页面 -->
        <AddRole v-if="addRoleModal" :all-resource="allResource" @cancel="onAddRoleModalCancel"/>

        <!-- 更新页面 -->
        <UpdateRole v-if="updateRoleModal" :all-resource="allResource" :update-object="updateObject"
                    @cancel="onUpdateRoleModalCancel"/>

        <!-- 删除页面 -->
        <Modal v-model="removeModal" width="360">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="information-circled"></Icon>
                <span>提示</span>
            </p>
            <div style="text-align:center">
                <p>此操作为不可逆操作，是否确认删除？</p>
            </div>
            <div slot="footer">
                <Button type="error" size="large" long :loading="setting.loading" @click="remove(removeObject.rid)">确认删除</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import AddRole from './components/add.vue'
    import UpdateRole from './components/update.vue'
    import {post, get} from '@/libs/request'

    export default {
        data() {
            return {
                // 开启添加角色页面
                addRoleModal: false,
                // 开启修改角色页面
                updateRoleModal: false,
                // 开启删除角色页面
                removeModal: false,
                // 传递的修改角色对象
                updateObject: null,
                // 进度条
                setting: {
                    loading: true,
                    showBorder: true
                },
                // 搜索
                search: {
                    type: 'name',
                    value: ''
                },
                // 表格属性
                columns: [
                    {title: 'ID', key: 'rid', sortable: true},
                    {title: '角色名', key: 'name', sortable: true},
                    {
                        title: '操作',
                        key: 'action',
                        width: 260,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {type: 'success', size: 'small'},
                                    style: {marginRight: '5px'},
                                    on: {
                                        click: () => {
                                            this.showAllResource(params.row)
                                        }
                                    }
                                }, '查看权限集'),
                                h('Button', {
                                    props: {type: 'primary', size: 'small'},
                                    style: {marginRight: '5px'},
                                    on: {
                                        click: () => {
                                            this.openAddOrUpModal(params.row)
                                        }
                                    }
                                }, '修改信息'),
                                h('Button', {
                                    props: {type: 'error', size: 'small'},
                                    on: {
                                        // click: () => {
                                        //     this.removeObject = {
                                        //         obj: params.row,
                                        //         index: params.index
                                        //     }
                                        //     this.removeModal = true;
                                        // }
                                        click: () => {
                                            this.removeModalOpen(params.row)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                // 表格数据
                data: {},
                // 分页
                dataFilter: {
                    page: 1,
                    pageSize: 10
                },
                // 传递的删除角色对象(没实现删除功能)
                removeObject: {},
                // 添加角色时,查询得到的所有菜单
                allResource: null
            }
        },
        components: {
            AddRole, UpdateRole
        },
        created() {
            this.getData();
        },
        methods: {
            pageChange(p) {
                this.dataFilter.page = p;
                this.getData();
            },
            pageSizeChange(p) {
                this.dataFilter.pageSize = p;
                this.getData();
            },

            async getData() {
                this.setting.loading = true;
                try {
                    let res = await post('/role/list', {
                        page: this.dataFilter.page - 1,
                        pagesize: this.dataFilter.pageSize
                    });
                    this.data = res.data;
                } catch (error) {
                    console.log(error);
                }
                this.setting.loading = false;
            },

            async getAllResource() {
                try {
                    let res = await post('/permission/all')
                    this.allResource = res.data;
                } catch (error) {
                    console.log(error);
                }
            },

            async openAddOrUpModal(obj, type = 'update') {
                if (this.allResource === null) {
                    await this.getAllResource();
                }
                if (obj === null) {
                    this.addRoleModal = true;
                } else if (type === 'update') {
                    this.updateObject = obj;
                    this.updateRoleModal = true;
                }
            },

            onAddRoleModalCancel(up = false) {
                this.addRoleModal = false;
                if (up) this.getData()
            },

            onUpdateRoleModalCancel(up = false) {
                this.updateRoleModal = false;
                if (up) this.getData()
            },

            dealPostData(data, ps, h) {
                if (data != null) {
                    data.forEach(element => {
                        let r = h('Tag', {
                            props: {
                                color: 'green',
                                type: 'dot'
                            }
                        }, element.name);
                        ps.push(r);
                        if (element.children != null) {
                            this.dealPostData(element.children, ps, h)
                        }
                    });
                }

            },

            async showAllResource(row) {
                try {
                    let res = await get('/role/permission', {rid:row.rid});
                    let resources = res.data;
                    if (resources != null && typeof(resources) == "object" && resources.length > 0) {
                        this.$Modal.info({
                            title: row.name + ' - 权限集',
                            width: '40%',
                            render: (h) => {
                                let ps = [];
                                resources.forEach(element => {
                                    let r = h('Tag', {
                                        props: {
                                            color: element.color == '' ? 'green' : element.color,
                                            type: 'dot',
                                        }
                                    }, element.name);
                                    ps.push(r);
                                    this.dealPostData(element.children, ps, h)
                                });
                                return h('div', {
                                    style: {padding: '20px 0 10px 0'}
                                }, ps);
                            }
                        });
                    } else {
                        this.$Notice.destroy()
                        this.$Notice.info({
                            title: "该角色暂无权限信息",
                            duration: 3
                        })
                    }
                } catch (error) {
                    console.log(error);
                }
            },

            /**
             * 开启删除页面
             * @param id
             */
            removeModalOpen(removeObject) {
                this.removeModal = true;
                this.removeObject = removeObject;
                console.log(removeObject)
            },


            async remove(rid) {
                this.removeModal = false;
                if (this.removeObject == null) {
                    this.$Message.warning("删除对象为空，无法继续执行！");
                    return false;
                }
                this.setting.loading = true;
                try {
                    // let res = await get('/role/remove/'+rid);
                    // let res2 = await get('/rolePermission/remove/'+rid);
                    this.$Message.success("系统不支持删除角色");
                    this.data.records.splice(this.removeObject.index, 1);
                } catch (error) {
                    console.log(error);
                }
                this.setting.loading = false;
            },


            /**
             * @description 导出表格CSV
             */
            exportData(type) {
                if (type === 1) {
                    this.$refs.table.exportCsv({
                        filename: '用户数据-' + new Date().getTime(),
                        columns: this.columns.filter((col, index) => index > 1 && index < this.columns.length - 1),
                        data: this.data.content
                    });
                }
            }
        }
    }
</script>
